<template>
    <view class="container">
        <view class="list">
            <view @tap="uploadAvatar" class="item">
                <view class="label">头像</view>
                <view class="content">
                    <view class="wrap">
                        <u-avatar size="70rpx" :src="userInfo.avatar"></u-avatar>
                    </view>
                    <view class="icon">
                        <u-icon color="#333333" name="arrow-right"></u-icon>
                    </view>
                </view>
            </view>
            <view @tap="openRename" class="item">
                <view class="label">昵称</view>
                <view class="content">
                    <view class="wrap">{{ userInfo.nickname }}</view>
                    <view class="icon">
                        <u-icon color="#333333" name="arrow-right"></u-icon>
                    </view>
                </view>
            </view>
            <view class="item" style="border-bottom: none;">
                <view class="label">手机号</view>
                <view class="content">
                    <view class="wrap">{{ userInfo.phone }}</view>
                </view>
            </view>
        </view>
        <view class="logout">
            <u-button @click="doLogout" class="btn">退出登录</u-button>
        </view>
        <u-modal :asyncClose="true" :show="renameShow" title="修改昵称">
            <view class="add-resource-content">
                <view class="add-resource-form">
                    <u--input
                        border="surround"
                        placeholder="请输入名称"
                        shape="circle"
                        v-model="renameForm.name"
                    ></u--input>
                </view>
            </view>
            <view slot="confirmButton">
                <view class="modal-action">
                    <button @tap="closeRename" class="cancel-btn btn" :plain="true">取消</button>
                    <button @tap="renameConfirm" class="confirm-btn btn" :loading="renameConfirmLoading" loadingText="保存">确定</button>
                </view>
            </view>
        </u-modal>
    </view>
</template>

<script>
export default {
  data() {
    return {
      version: '',
      userInfo: {},
      renameShow: false,
      renameConfirmLoading: false,
      renameForm: {
        id: '',
        name: ''
      }
    };
  },
  onLoad() {
    this.getUserInfo()
  },
  methods: {
    openRename() {
      this.renameForm.name = this.userInfo.nickname;
      this.renameShow = true;
    },
    closeRename() {
      this.renameForm.name = '';
      this.renameShow = false;
    },
    renameConfirm() {
      this.$util.request({
        url: '/user/setUserNickname',
        data: {
          nickname: this.renameForm.name
        },
        loadingText: '正在保存'
      }).then(res => {
        this.$util.message(res.message)
        this.renameShow = false;
        this.getUserInfo();
      })
    },
    getUserInfo() {
      this.$util.request({
        url: '/user/getInfo',
        loading: false
      }).then(res => {
        this.userInfo = res.data
      })
    },
    uploadAvatar() {
      var that = this;
      uni.chooseImage({
        count: 1,
        success: function (res) {
          that.$util.upload({
            url: '/upload/image',
            filePath: res.tempFiles[0].path,
            name: 'image'
          }).then(res => {
            that.$util.request({
              url: '/user/setUserAvatar',
              data: {
                avatar: res.url
              }
            }).then(() => {
              that.$util.message(res.message)
              that.getUserInfo();
            })
          })
        }
      });
    },
    doLogout() {
      var that = this;
      uni.showModal({
        title: '温馨提示',
        content: '确认要退出登录吗？',
        success: function (res) {
          if (res.confirm) {
            that.$util.request({
              url: '/user/logout'
            }).then(res => {
              that.$util.message(res.message)
              setTimeout(function () {
                uni.reLaunch({
                  url: '/pages/index/index'
                });
              }, 1500);
            })

          }
        }
      });
    }
  }
}
</script>
<style scoped>
@import './setting.css';
</style>
